<template>
    <div class="studentList">
        <!-- 查询、重置 -->
        <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                size="small">
            <el-form-item>
                <el-input
                        v-model="pagination.orderSn"
                        placeholder="请输入订单编号"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="find()">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border style="width: 100%">
            <el-table-column prop="orderSn" label="订单编号" align="center">
            </el-table-column>
            <el-table-column prop="bussinessName" label="店铺名" align="center">
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" align="center">
            </el-table-column>
            <el-table-column prop="customerId" label="下单人ID" align="center">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="setY(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="pagiantion"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total"
        >
        </el-pagination>
        <el-dialog title="查看订单详情" :visible.sync="dialogFormVisible" style="text-align: center" width="800px">
            <el-form :model="form" ref="form">
                <div class="form_item">
                    <el-form-item class="btn" label="编号:" :label-width="formLabelWidth">
                        <el-input v-model="form.orderSn" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="订单状态:" :label-width="formLabelWidth">
                        <el-input v-model="form.orderSnText" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
                <div class="form_item">
                    <el-form-item class="btn" label="商家名:" :label-width="formLabelWidth">
                        <el-input v-model="form.bussinessName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="商品名:" :label-width="formLabelWidth">
                        <el-input v-model="form.productName" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
                <div class="form_item">
                    <el-form-item class="btn" label="下单人id:" :label-width="formLabelWidth">
                        <el-input v-model="form.customerId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="收货人姓名:" :label-width="formLabelWidth">
                        <el-input v-model="form.shippingUser" autocomplete="off"></el-input>
                    </el-form-item>
                </div>


                <div class="form_item">
                    <el-form-item class="btn" label="省:" :label-width="formLabelWidth">
                        <el-input v-model="form.province" autocomplete="off" style="width: 100px"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="市:" :label-width="formLabelWidth">
                        <el-input v-model="form.city" autocomplete="off" style="width: 100px"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="区:" :label-width="formLabelWidth">
                        <el-input v-model="form.district" autocomplete="off" style="width: 100px"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="地址:" :label-width="formLabelWidth">
                        <el-input v-model="form.address" autocomplete="off" style="width: 500px"></el-input>
                    </el-form-item>
                </div>
                <div class="form_item">
                    <el-form-item class="btn" label="订单金额:" :label-width="formLabelWidth">
                        <el-input v-model="form.orderMoney" autocomplete="off" style="width: 80px"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="优惠金额:" :label-width="formLabelWidth">
                        <el-input v-model="form.districtMoney" autocomplete="off" style="width: 80px"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="运费金额:" :label-width="formLabelWidth">
                        <el-input v-model="form.shippingMoney" autocomplete="off" style="width: 80px"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="支付金额:" :label-width="formLabelWidth">
                        <el-input v-model="form.paymentMoney" autocomplete="off" style="width: 80px"></el-input>
                    </el-form-item>
                </div>
                <div class="form_item">
                    <el-form-item class="btn" label="快递公司:" :label-width="formLabelWidth">
                        <el-input v-model="form.shippingCompName" autocomplete="off" style="width: 80px"></el-input>
                    </el-form-item>

                    <el-form-item class="btn" label="快递单号:" :label-width="formLabelWidth">
                        <el-input v-model="form.shippingSn" autocomplete="off"></el-input>
                    </el-form-item>

                    <!--                                    <el-form-item label="入校时间" :label-width="formLabelWidth" prop="time">-->
                    <!--                                        <el-date-picker-->
                    <!--                                                v-model="form.time"-->
                    <!--                                                format="yyyy 年 MM 月 dd 日"-->
                    <!--                                                value-format="yyyy-MM-dd"-->
                    <!--                                                type="date"-->
                    <!--                                                placeholder="选择日期">-->
                    <!--                                        </el-date-picker>-->
                    <!--                                    </el-form-item>-->
                </div>
                <div class="form_item">
                    <el-form-item class="btn" label="下单时间" :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="form.createTime"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                                type="date">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="btn" label="支付时间" :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="form.payTime"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                                type="date">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="btn" label="发货时间" :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="form.shippingTime"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                                type="date">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="btn" label="收货时间" :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="form.receiveTime"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                                type="date">
                        </el-date-picker>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sure()">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<script>
    import {getOrderMsgData} from "../../../api/api";

    export default {
        data() {
            return {
                dialogFormVisible: false,
                dataList: [],
                form: {
                    address: "",
                    bussinessId: "",
                    bussinessName: "",
                    city: "",
                    createTime: "",
                    customerId: "",
                    customerName: "",
                    district: "",
                    districtMoney: "",
                    orderId: "",
                    orderMoney: "",
                    orderSn: "",
                    orderStatus: "",
                    payTime: "",
                    paymentMoney: "",
                    productId: "",
                    productName: "",
                    province: "",
                    receiveTime: "",
                    shippingCompName: "",
                    shippingMoney: "",
                    shippingSn: "",
                    shippingTime: "",
                    shippingUser: "",
                    orderSnText: ""
                },
                search: {}
                ,
                pagination: {
                    currentPage: 1, //当前页数
                    pageSize:
                        10, // 每页显示条数
                    total:
                        0, // 总条数
                    orderSn:
                        ""
                },
                formInline: {
                    name: "",
                },
                formLabelWidth: "100px",
            };
        },
        created() {
            this.getData();
        },
        computed: {},
        methods: {
            find() {
                this.getData()
            },
            reset() {
                this.pagination.orderSn = ""
            },
            handleCurrentChange(currentPage) {
                //修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
                //执行查询
                this.getData();
            },
            getData() {
                console.log(this.pagination)
                getOrderMsgData(this.pagination).then((res) => {
                    if (res.data.status === 200) {
                        console.log(res.data)
                        this.dataList = res.data.data.records;
                        this.pagination.total = res.data.data.total;
                    }
                });
            },
            setY(row) {
                //订单状态0:已下单，未支付 1:已下单，支付失败 2:已支付，处理中 3:已发货 4:退货 5:订单完成
                this.form = {...row}
                this.form.orderStatus == "0"
                    ? (this.form.orderSnText = "已下单，未支付")
                    : this.form.orderStatus == "1"
                    ? (this.form.orderSnText = "已下单，支付失败")
                    : this.form.orderStatus == "2"
                    ? (this.form.orderSnText = "已支付，处理中")
                    : this.form.orderStatus == "3"
                    ? (this.form.orderSnText = "已发货")
                    : this.form.orderStatus == "4"
                    ? (this.form.orderSnText = "退货")
                    : (this.form.orderSnText = "订单完成")
                this.dialogFormVisible = true
            },
            sure() {
                this.dialogFormVisible = false;
                this.form = ""
            }
        },
    };
</script>
<style lang="scss">
    .studentList {
        .demo-form-inline, .el-form-item {
            text-align: left;
            /*float: left;*/
            height: auto;
        }

        .el-input {
            width: auto; // 这里一定要设置为auto 否则由于input是默认width ：100%的
            height: auto;
        }

        .form_item {
           //border-style: dashed dotted double groove;
            text-align: left;
            width: 100%;

        }

        .btn {
            display: inline-block;
        }

        .el-pagination {
            text-align: left;
            margin-top: 20px;
        }
    }
</style>
